<template>
  <div class="my-login-page">
    <div class="page-header-main">
      <x-header title="登录" :left-options="{backText:'',preventGoBackL:true}" class='transparentHeader' @click.native='goBack'></x-header>
    </div>
    <div class="loginLogo">
    </div>
    <div class="loginForm">
      <div class="phoneItem">
        <img src="../../assets/image/mine/phone.png"  alt="" />
        <input type="number" placeholder="输入手机号" v-model='phone'/>
        <div class="button" :class='{activeButton:phoneLength}' @click='getCode'>{{text}}</div>
      </div>
      <div class="codeItem">
        <img src="../../assets/image/mine/pass.png" alt="" />
        <input type="text" placeholder="输入验证码" v-model='code'/>
      </div>
      <div class="rules">
        <p>新用户登录即完成注册，代表同意<a href="http://carnt.carnettong.com:8088/CARNT/protocol.jsp">《车网通用户协议》</a></p>   
      </div>
      <div class="login" :class='{canLogin:showLogin}' @click='loginGo1'>
        立即登录
      </div>
    </div>
  </div>
</template>
<script>
import {getCookie,setCookie} from '../../util/commonUtils'
import {XHeader} from 'vux';
  export default {
    name: 'my-login',
    data() {
      return {
        phone:'',//手机号
        code:'', //验证码 
        text:'获取验证码',
        canSend:false,  //发送验证码开关
        showLogin:false
      };
    },
    components: {
      XHeader
    },
    computed:{
      //当长度等于11是获取验证码按钮高亮
      phoneLength(){
        if(this.phone.length==11){
          return true;
        }else{
          return false;
        }
      }
    },
    created (){

    },
    methods:{
      goBack(){
        sessionStorage.removeItem('returnLink');
        if(sessionStorage.getItem('returnLink')=='shopCar'){
          this.$router.push('/homepage');
        }else if(sessionStorage.getItem('returnLink')){
          location.href=sessionStorage.getItem('returnLink');
        }else{
          this.$router.go(-1);
        }
      },
      //获取验证码
      getCode(){
        if(!this.phone){
          return;
        }
        if(this.phone==''){
          this.$vux.alert.show({
            title: '提示',
            content: '手机号不能为空',
          })
          return;
        }else if(!/^[1][3456789][0-9]{9}$/g.test(this.phone)){
          this.$vux.alert.show({
            title: '提示',
            content: '手机号不合法',
          })
          return;
        }
        if(this.canSend){
          return;
        }
        this.$fetchPost('/UserWeb/sendVerifyCode.action',{PHONE:this.phone}).then(res=>{
          console.log(res);
          if(res.STATUS_CODE==1){
            this.countDown();
            this.canSend=true;
            this.showLogin=true;
          }
        },err=>{

        })
      },
      //倒计时
      countDown(){
        let i=60;
        let down=setInterval(()=>{
          --i;
          this.text=i+'s可重发';
          if(i<=0){
            this.text='获取验证码';
            this.canSend=false;
            clearInterval(down);
          }
        },1000)
      },
      //快捷登录
      loginGo1(){
        if(!this.showLogin){
          return;
        }
        if(this.phone==''){
          this.$vux.alert.show({
            title: '提示',
            content: '请输入用户名',
          })
          return;
        }else if(!/^[1][3456789][0-9]{9}$/g.test(this.phone)){
          this.$vux.alert.show({
            title: '提示',
            content: '手机号不合法',
          })
          return;
        }
        let obj={
          USERNAME:this.phone,
          VERIFY_CODE:this.code,
          LOGIN_SYSTEM:'web'
        }
        this.login(obj);
      },
      /*//普通登录
      loginGo2(){
        if(this.phone==''){
          MessageBox.alert('请输入用户名');
          return;
        }else if(this.password){
          MessageBox.alert('请输入密码');
          return;
        }else if(!/^[1][3456789][0-9]{9}$/g.test(this.phone)){
          MessageBox.alert('手机号不合法');
          return;
        }
        let obj={
          USERNAME:this.phone,
          PASSWORD:this.password
        }
        this.login(obj);
      },*/
      login(obj){
        this.$fetchPost('/UserWeb/signIn.action',obj).then(res=>{
          console.log(res);
          if(res.STATUS_CODE==1){
            setCookie('loginkey',res.USER.USER_ID);
            setCookie('name',res.USER.USERNAME);
            setCookie('userName',res.USER.USERNAME);
            setCookie('userAvatar',res.USER.AVATAR);
            setCookie('CAR_ID',res.USER.CAR_ID);
            setCookie('INV_CODE',res.INV_CODE);
            setCookie('INV_URL',res.INV_URL);
            let that=this;
            //location.href='http://carnt.carnettong.com:8088/CARNT/jsp/medition/index.jsp';
            sessionStorage.removeItem('returnLink');
            if(sessionStorage.getItem('returnLink')=='shopCar'){
              this.$router.push('/homepage');
            }else if(sessionStorage.getItem('returnLink')){
              location.href=sessionStorage.getItem('returnLink');
            }else{
              this.$router.go(-1);
            }
          }else if(res.STATUS_CODE==3){
            this.$vux.alert.show({
              title: '提示',
              content: '验证码错误'
            })
          }
        },err=>{

        })
      }
    }
  };

</script>
<style scoped lang='less'>
@import url('../../assets/css/public.less');
  .my-login-page{
    width: 7.5rem;
    height: 100%;
    background:#fff;
    .loginLogo{
      width: 7.5rem;
      height: 4.24rem;
      background: url(../../assets/image/mine/loginLogo.png) no-repeat;
      background-size: 7.5rem 4.24rem;
      margin-top: -0.88rem;
      margin-bottom: 0.9rem;
    }
    .loginForm{
      input{
        border:0;
        padding-left: 0.2rem;
        width: 70%;
        outline: medium;
        font-size: 0.3rem;
      }
      padding:0 0.5rem;
      .phoneItem{
        display: flex;
        height: 1rem;
        line-height: 1rem;
        img{
          width: 0.28rem;
          height: 0.44rem;
          margin-top: 0.27rem;
        }
        .button{
          margin: 0.2rem;
          color: #999;
          font-size: 0.24rem;
          background: #fff;
          width: 1.86rem;
          height: 0.6rem;
          line-height: 0.6rem;
          border-radius: 0.4rem;
          .borderFu(#999,0.8rem);
        }
        .activeButton{
          color: #ec2121;
          .borderFu(#ec2121,0.8rem);
        }
        border-bottom:1px solid #ede9e9;
      }
      .codeItem{
        display: flex;
        height: 1rem;
        line-height: 1rem;
        img{
          width: 0.3rem;
          height: 0.35rem;
          margin-top: 0.32rem;
        }
        border-bottom:1px solid #ede9e9;
      }
      .login{
        width: 6.5rem;
        margin: 0.5rem auto 0.4rem;
        font-size: 0.3rem;
        background: #aeaeae;
        height: 0.78rem;
        color: #fff;
        line-height: 0.78rem;
        font-weight: 500;
        border-radius: 0.5rem;
      }
      .canLogin{
        background: #ec2121;
      }
    }
    .rules{
      margin-top: 0.6rem;
      p{
        font-size: 0.24rem;
        color: #999;
        line-height: 0.4rem;
        text-align: center;
      }
      a{
        font-size: 0.25rem;
        color: #ec2121;
      }
      
    }
  }

</style>